<template>
	<view class="success">
		<view class="s_code">
			<view class="s_top">
				<uni-icons type="checkbox-filled" color="#00baad" size="30"></uni-icons>
				<view class="s_text">
					您的服务工单报单成功
				</view>
			</view>
			<view class="code">
				<canvas class="code-item" canvas-id="qrcode" style="height: 300rpx;width: 300rpx;" />
			</view>
			<view class=" order">
				<view class=" s_o_title">
					服务单号：
				</view>
				<view class="s_order">
					{{workNo}}
				</view>
			</view>
		</view>
		<view class="success_btn" @click="onSavePic">
			<button type="primary" class="btn">保存二维码 可识别查询</button>
		</view>
		<view class="success_btn" @click="gopage">
			<button type="primary" class="btn_t">查看我的工单进度</button>
		</view>
		<view class="go_home_btn" @click="goHome">
			<uni-icons size="32" color="#007cff" type="home-filled"></uni-icons>
			<view>首页</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import wxcode from 'uniapp-qrcode'
	onLoad((e) => {
		workNo.value = e.workNo
		workId.value = e.id
	})
	const workNo = ref('')
	const workId = ref('')
	onMounted(() => {
		wxcode.qrcode('qrcode', workNo.value, 300, 300);
	})
	// 跳转
	const gopage = () => {
		uni.navigateTo({
			url: '/pages/order/detail?id=' + workId.value
		})
	}
	const goHome = () => {
		uni.reLaunch({
			url: '/pages/home/home'
		})
	}
	// 保存二维码
	const onSavePic = () => {

		// 生成图片文件
		uni.canvasToTempFilePath({
			canvasId: 'qrcode',
			success: function (res) {
				// 保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function () {
						let name=new Date().getTime()
						//创建一个a标签
						var link = document.createElement('a');
						//把a标签的href属性赋值到生成好了的url
						link.href = res.tempFilePath;
						//通过a标签的download属性修改下载图片的名字
						link.download =`${name}.png`;
						//让a标签的click函数，直接下载图片
						link.click();
						// 下载之后把创建的元素删除
						link.remove()
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: function () {
						uni.showToast({
							title: '保存失败',
							icon: 'none',
						});
					},
				});
			},
		});



	}
</script>

<style lang="scss" scoped>
	.success {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 10%;

		.s_code {

			padding: 30rpx 120rpx;
			margin: 50rpx 0;
			border-radius: 20rpx;

			.s_top {
				display: flex;
				align-items: center;
				justify-content: center;

				.s_text {
					margin-left: 20rpx;
				}
			}

			.code {
				padding: 40rpx;
				display: flex;
				justify-content: center;

				:deep(uni-canvas) {
					border: 1rpx solid #ebebeb;
					background-color: #fff;
				}
			}

			.order {
				display: flex;
				justify-content: center;
				align-items: center;

				.s_o_title {
					font-size: 28rpx;
				}

				.s_order {
					font-size: 28rpx;
					color: #2e79fd;
				}
			}
		}

		.success_btn {

			box-sizing: border-box;
			padding: 0 80rpx;
			width: 100%;

			.btn {
				width: 100%;
				margin-bottom: 50rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
				background-color: #2e79fd;
			}

			:deep(button:after) {
				border: none !important;
			}

			.btn_t {
				background-color: #00c0c0;
				width: 100%;
				margin-bottom: 50rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
			}
		}

		.go_home_btn {
			margin-top: 50rpx;
			text-align: center;
			font-size: 24rpx;
			color: #2e79fd;
			border-bottom: 2rpx solid #2e79fd;
		}
	}
</style>